<template>
  <div>
    <div class="block">
    <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
    </div>
    <div class="block">
    <el-select  v-model="value" clearable placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    </div>
    <div class="block">
    <el-select v-model="value8" clearable filterable placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    </div>
    <div class="block">
    <el-select
      v-model="value9"
      multiple collapse-tags :multiple-limit="2"
      filterable
      remote
      no-data-text="hahah "
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading">
      <el-option
        v-for="item in options4"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    </div>
  </div>
</template>

<script>
    export default {
        name: "input-number",
        data() {
          return {
            num1: 1,
            options: [
              {
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
            value: '',
            value8: '',
            options4: [],
            value9: [],
            list: [],
            loading:false,
            states: ["Alabama", "Alaska", "Arizona",
              "Arkansas", "California", "Colorado",
              "Connecticut", "Delaware", "Florida",
              "Georgia", "Hawaii", "Idaho", "Illinois",
              "Indiana", "Iowa", "Kansas", "Kentucky",
              "Louisiana", "Maine", "Maryland",
              "Massachusetts", "Michigan", "Minnesota",
              "Mississippi", "Missouri", "Montana",
              "Nebraska", "Nevada", "New Hampshire",
              "New Jersey", "New Mexico", "New York",
              "North Carolina", "North Dakota", "Ohio",
              "Oklahoma", "Oregon", "Pennsylvania",
              "Rhode Island", "South Carolina",
              "South Dakota", "Tennessee", "Texas",
              "Utah", "Vermont", "Virginia",
              "Washington", "West Virginia", "Wisconsin",
              "Wyoming"],

          };
        },
        methods: {
          handleChange(value) {
            console.log(value);
            this.$message({
              type: 'success',
              message: value
            });
          },
          remoteMethod(query) {
            if (query !== '') {
              this.loading = true;
              setTimeout(() => {
                this.loading = false;
                this.options4 = this.list.filter(item => {
                  return item.label.toLowerCase()
                    .indexOf(query.toLowerCase()) > -1;
                });
              }, 200);
            } else {
              this.options4 = [];
            }
          }
        },
      mounted() {
        this.list = this.states.map(item => {
          return { value: item, label: item };
        });
      }
    }
</script>

<style scoped>

</style>
